<template>
  <div class="manager-article-archive__page main__page">
    <archiveLayout
      :current-page="nowShowTab.page"
      :tabs="tabs"
      :total="nowShowTab.count"
      @current-change="currentChangeHandler"
      @switch-tab="switchTab"
      :title="layoutTitle"
    >
      <archiveListItem :list="nowShowTab.list" @delete="archiveDeleteHandler" />
    </archiveLayout>
  </div>
</template>

<script>
import { getArchiveListAPI } from '@/api/archive';
import archiveLayout from '@/components/ArchiveLayout/index.vue';
import archiveListItem from './components/archiveListItem.vue';

export default {
    name: 'ManagerArticleArchive',
    components: {
        archiveLayout,
        archiveListItem,
    },
    data() {
        return {
            tabs: [
                { name: '全部', state: 0, count: 0, list: [], load: false, page: 1 },
                { name: '审核中', state: 1, count: 0, list: [], load: false, page: 1 },
                { name: '已通过', state: 2, count: 0, list: [], load: false, page: 1 },
                { name: '未通过', state: 3, count: 0, list: [], load: false, page: 1 },
            ],
            nowCheck: 0,
        };
    },
    computed: {
        uid() {
            return this.$store.state.user.userInfo.uid;
        },
        nowShowTab() {
            return this.tabs[this.nowCheck];
        },
        archiveType() {
            return this.$route.meta.archiveType;
        },
        layoutTitle() {
            return this.$route.meta.title;
        },
    },
    created() {
        this.main();
    },
    methods: {
        async main() {
            await this.getArticleArchive();
        },
        async getArticleArchive(state = 0) {
            const params = {
                uid: this.uid,
                type: this.archiveType,
                state,
                page: this.tabs[state].page,
                size: 5,
            };
            this.tabLoading = true;
            const { data } = await getArchiveListAPI(params);
            this.formatData(data);
            this.tabLoading = false;
        },
        formatData(data) {
            this.tabs[0].count = data.count;
            this.tabs[1].count = data.examineDoingCount;
            this.tabs[2].count = data.examineCompleteCount;
            this.tabs[3].count = data.examineFailCount;
            this.tabs[this.nowCheck].load = true;
            this.tabs[this.nowCheck].list = data.archives.map((archive) => {
                this.$set(archive, 'isDelete', false);
                return archive;
            });
        },
        async switchTab(index) {
            this.nowCheck = index;
            if (this.nowShowTab.load) return; // 使用缓存数据
            await this.getArticleArchive(index);
        },
        async currentChangeHandler(page) {
            this.nowShowTab.page = page;
            this.nowShowTab.load = false;
            await this.getArticleArchive(this.nowShowTab.state);
        },
        async archiveDeleteHandler() {
            this.nowShowTab.load = false;
            await this.getArticleArchive(this.nowShowTab.state);
            if (this.nowShowTab.list === 0) {
                this.page -= 1;
                if (this.page < 1) this.page = 1;
                await this.getArchiveListExamine();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.manager-article-archive__page {
  // width: $baseWidth;
  min-width: $baseWidth;
  max-width: $bigWidth;
  min-height: 100%;
  margin: auto;
  position: relative;
}
</style>
